<template>
  <div :class="getStatusRelation(item.status).className">
    <div class="info">
      <div :class="['title-box', item.status === '1' ? 'title-unScan' : 'title-scan']">
        {{ item.materialName }}
      </div>
      <div :class="['sort-box', item.status === '1' ? 'sort-unScan' : 'sort-scan']">
        <span class="sort" :style="{ color: item.status === '1' ? '#A6B6E1' : '#ffffff' }">
          {{ item.materialVerifiedCode || "" }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    code: {
      type: String,
      default: "",
    },
    status: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      item: {
        materialName: "扫描物料",
        materialVerifiedCode: "xxxxxx",
        status: "3",
      },
      statusRelations: [
        { status: "1", statusValue: "未验证", className: "unstart" },
        { status: "2", statusValue: "验证中", className: "ongoing" },
        { status: "3", statusValue: "已完成", className: "completed" },
      ],
    };
  },
  // 监听 props 的变化
  watch: {
    $props: {
      handler(newValue) {
        this.item = {
          materialName: newValue.title,
          materialVerifiedCode: newValue.code,
          status: newValue.status,
        };
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getStatusRelation(status) {
      let returnObj;
      this.statusRelations.forEach((item) => {
        if (item.status === status) {
          returnObj = item;
        }
      });
      return returnObj;
    },
  },
};
</script>

<style scoped>
.unstart {
  border: 4px solid #304357;
}

.ongoing {
  border: 4px solid #1c5b31;
}

.completed {
  border: 4px solid #00d200;
}

.info {
  display: flex;
  height: 88px;
}

.title-box {
  width: 55%;
  height: 88px;
  line-height: 88px;
  font-size: 48px;
  font-weight: bold;
  padding-left: 2vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-scan {
  background: #0b2414;
  color: #00d200;
}

.title-unScan {
  background: #304357;
  color: #ffffff;
}

.sort-box {
  width: 45%;
  line-height: 88px;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
}

.sort-unScan {
  background: #0f161c;
  color: #a6b6e1;
}

.sort-scan {
  background: #092f0f;
  color: #00d200;
}
</style>